<template>
    <div id="login">
        <div class="box clear">
            <h1>易理赔登录</h1>
            <!-- 登录跳转 -->
            <el-form ref="form" :model="userobj" label-width="80px">
                <el-form-item label="账户">
                    <el-input v-model="userobj.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input show-password v-model="userobj.pwd"></el-input>
                </el-form-item>
                <el-form-item label="">
<!--                    <el-checkbox-group v-model="userobj.remember">-->
<!--                        <el-checkbox label="7天免登录" name="remember"></el-checkbox>-->
<!--                    </el-checkbox-group>-->
                    <p @click="centerDialogVisible = true">忘记密码</p>
                </el-form-item>
                <el-button type="primary" @click="mylogin">登录</el-button>
            </el-form>
        </div>
        <!-- 忘记密码弹框 -->
        <el-dialog title="找回密码" :visible.sync="centerDialogVisible" width="30%" center>
            <el-form>
                <el-form-item label="">
                    <el-input ref="phone" v-model="phone" style="width:200px" placeholder="请输入手机号码"></el-input>
                    <el-button type="primary" @click="getYzm">获取验证码</el-button>
                </el-form-item>
                <el-form-item label="">
                    <el-input ref="yanzheng" v-model="yanzheng" placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input ref="mima" show-password v-model="newpwd" placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input ref="querenmima" show-password v-model="querennewpwd" placeholder="确认新密码"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="queding">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import * as api from '../utils/api'
    import utils from '../utils/utils'
    import { mapActions } from 'vuex'
    export default {
        name: 'login',
        data() {
            return {
                centerDialogVisible: false,
                phone: '',
                /* 验证码 */
                yanzheng: '',
                yanzhengma: '',
                /* 新密码 */
                newpwd: '',
                querennewpwd: '',
                userobj: {
                    name: '',
                    pwd: '',
                    remember: ''
                },
                dengluzhexinxi:'',
            }
        },
        methods: {
            ...mapActions(['login']),
            /* 登录按钮 */
            mylogin() {
                //记住密码传 1 ，不记住传 0
                // this.$router.push("/carHome/carMain");
                if (this.userobj.remember){
                    this.userobj.remember = '1'
                }else{
                    this.userobj.remember = '0'
                }
                let user = {
                    name: this.userobj.name,
                    pwd: this.userobj.pwd,
                    remember: this.userobj.remember,
                }
                this.login(user).then(data=>{
                    // console.log(data)
                    // console.log(this.$store.state.msgCount.user)
                    if (data.data.code === 200){
                        this.$message({
                            message: '登录成功!'
                        });
                        if (this.$store.state.msgCount.user.role_id === 1){
                            this.$router.push("/guanliHome/shouye");
                        }else if (this.$store.state.msgCount.user.role_id === 2){
                            this.$router.push("/guanliHome/shouye");
                        }else if (this.$store.state.msgCount.user.role_id === 3){
                            this.$router.push("/carHome/carMain");
                        }else if (this.$store.state.msgCount.user.role_id === 4){
                            this.$router.push("/userHome/userMain");
                        }
                    }else{
                        this.$message({
                            type: 'info',
                            message: '登录失败，请输入正确的账号和密码!'
                        });
                    }
                })
            },

            getYzm() {
                this.$nextTick(function () {
                    // console.log(this.$refs.phone.value,this.phone)
                    this.axios({
                        url: api.GET_SENDCODE,
                        method: 'get',
                        params: {
                            user_phone: this.phone
                        }
                    }).then(data => {
                        if (data.data.code == 200) {
                            this.yanzhengma = data.data.data
                        }else if(data.data.code == 500){
                            this.$message({
                                message: '手机号不正确~',
                                type: 'warning'
                            });
                        }
                    })
                })
            },
            /* 忘记密码弹框确定按钮 */
            queding() {
                this.$nextTick(function () {
                    // console.log(this.yanzhengma,this.$refs.yanzheng.value)
                    if (this.yanzhengma != '') {
                        if (this.$refs.yanzheng.value == this.yanzhengma) {
                            if (this.$refs.mima.value == this.$refs.querenmima.value) {
                                this.axios({
                                    url: api.GET_FORGETPWD,
                                    method: 'get',
                                    params: {
                                        user_phone: this.$refs.phone.value,
                                        user_pwd: this.$refs.mima.value
                                    }
                                }).then(data => {
                                    if (data.data.code == 200) {
                                        this.yanzhengma = data.data.data
                                    }
                                })
                                // console.log('成功')
                                this.centerDialogVisible = false
                            } else {
                                this.$message({
                                    message: '两次密码不一致~',
                                    type: 'warning'
                                });
                            }
                        } else {
                            this.$message({
                                message: '验证码错误或已经过期~',
                                type: 'warning'
                            });
                        }
                    } else {
                        this.$message({
                            message: '请先获取验证码~',
                            type: 'warning'
                        });
                    }

                })
            }
        },
        created() {
            // console.log(this.$store.state.msgCount.user)
        },
    }
</script>
<style lang="less" scoped>
    #login {
        box-sizing: border-box;
        padding-top: 7rem;
        height: 100rem;
        background-image: url('../assets/bg.jpg');
        height: 100vh;
    }

    .box {
        background-color: #8bc0d069;
        margin: auto;
        padding: 3rem 4rem 2rem 0;
        width: 30rem;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }

    h1 {
        color: #014461;
        padding: 0 0 2rem 0;
        margin-left: 4rem;
    }

    .el-form-item {
        text-align: left;
    }
    .el-checkbox-group {
        float: left;
        width: 10rem;
    }

    .el-form-item p {
        width: 100%;
        color: #746b5b;
        display: inline-block;
        /*margin-right: 2rem;*/
        text-align: right;
        cursor: pointer;
    }

    .el-form-item span:hover {
        color: #FCAB40;
    }

    .el-button {
        margin-left: 4rem;
    }
</style>